<template>
  <div>
    <dir class="top">
      <van-nav-bar title="首页" />
    </dir>
    <div class="GPS_box">
      <span><van-icon name="location-o" size="20" />送至：兰亭11号<i>&gt;</i></span>
    </div>
    <div class="search_box">
      <van-search v-model="value" shape="round" background="#fff" placeholder="请输入搜索关键词" />
    </div>
    <div class="swipe_box">
      <Swipe :imgs="imgs" />
    </div>
    <div class="grid_box">
      <van-grid square :column-num="5">
        <van-grid-item v-for="value in 10" :key="value" icon="photo-o" text="文字" />
      </van-grid>
    </div>
    <div class="tab_box">
      <van-tabs v-model:active="active" @change="onClickTab">
        <van-tab v-for="item in tab" :key="item.title" :title="item.title">
          <van-row>
            <van-col v-for="item2 in tabData" :key="item2._id" :span="12">
              <van-card :price="item2.price" :title="item2.name" :thumb="item2.img">
                <template #footer>
                  <van-button icon="plus" size="mini" color="linear-gradient(to right, #ff6034, #ee0a24)"></van-button>
                </template>
              </van-card>
            </van-col>
          </van-row>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Swipe from '@/components/Swipe.vue'
import { changeTab } from '@/axios/getData'

const value = ref('');
const active = ref(0);
const tabData = ref([])

let imgs = [
  '/images/10008.png',
  '/images/10009.png',
  '/images/10011.png',
]

let tab = [
  { title: '猜你喜欢' },
  { title: '精选好物' },
  { title: '预售专区' },
  { title: '时令新品' },
]


const onClickTab = async (name: string | number, title: string) => {
  let arr = await changeTab({ title })
  // console.log(arr);
  tabData.value = arr
  // console.log(title);
};

onMounted(async () => {
  let arr = await changeTab({ title: '猜你喜欢' })
  // console.log(arr);
  tabData.value = arr
})

</script>

<style scoped></style>